<template>
    <div class="info-collect">
        <Crumb name="Unit Option List"></Crumb>

        <div class="content">
            <el-button
                    type="primary"
                    @click="openAdd"
            >Add New Unit Option
            </el-button>
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        placeholder="Search By type name"
                        prefix-icon="el-icon-search"
                ></el-input>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="optionList.slice((pageNum-1)*pageSize,pageNum*pageSize)"
                        empty-text="No Data"
                        border
                        stripe
                        style="width: 100%">

                    <el-table-column
                            prop="typeName"
                            label="Type"
                            width="180"
                    >
                    </el-table-column>

                    <el-table-column
                            prop="styleName"
                            label="capacity"
                            width="180"
                    >
                    </el-table-column>

                    <el-table-column
                            prop="purchasePrice"
                            label="Purchase Price"
                            width="180"
                    >
                    </el-table-column>

                    <el-table-column
                            prop="salePrice"
                            label="Sale Price"
                            width="180"
                    >
                    </el-table-column>

                    <el-table-column label="Opr">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="openEdit(scope.row)">Modify
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>

            </div>

            <div class="modal-wrapper">
                <el-dialog
                        title="Unit Option"
                        top="10"
                        :visible.sync="dialogVisible"
                        width="80%"
                >
                    <el-form :model="ruleForm" ref="ruleForm" label-width="200px" class="demo-ruleForm">
                        <el-form-item v-show="!ruleForm.id" label="Field">
                            <el-select  v-model="fieldId">
                                <el-option v-for="item in fieldList" :value="item.id" :key="item.id" :label="item.fieldName"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-show="!ruleForm.id" label="Type">
                            <el-select v-model="ruleForm.typeId">
                                <el-option v-for="item in typeList" :value="item.id" :key="item.id" :label="item.typeName"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-show="!ruleForm.id" label="capacity">
                            <el-select v-model="ruleForm.styleId">
                                <el-option v-for="item in capacityList" :value="item.id" :key="item.id" :label="item.styleName"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="purchase price">
                            <el-input v-model="ruleForm.purchasePrice" size="small"/>
                        </el-form-item>
                        <el-form-item label="sale price">
                            <el-input v-model="ruleForm.salePrice" size="small"/>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="submitForm">Confirm</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import {ERROR_OK} from "../../util/config";
    import mixins from '../../util/mixins'
    import {
        getUnitOptionList,
        addPrice,
        modPrice,
        getCapacityList,
        getUnitFieldList,
        getTypeList
    } from "../../api/unit";

    export default {
        name: "info-collect",
        mixins:[mixins],
        data() {
            return {
                ruleForm: {},
                list: [],
                fieldList: [],
                capacityList:[],
                typeList: [],
                fieldId:'',
                key: '',
                dialogVisible: false
            }
        },
        computed: {
            optionList() {
                return this.list.filter(item => item.typeName.toLowerCase().indexOf(this.key.toLowerCase()) > -1)
            }
        },
        created() {
            this._getOptionList();
            this._getFieldList();
            this._getFieldList();
            this._getCapacityList();
        },
        methods: {
            async _getCapacityList(){
                const {status,data} = await getCapacityList();
                if (status === ERROR_OK ) {
                    this.capacityList  = data
                }
            },
            async _getFieldList() {
                const {status, data} = await getUnitFieldList();
                if (status === ERROR_OK) {
                    this.fieldList = data
                }
            },
            async _getTypeList(fieldId) {
                const {status, data} = await  getTypeList({fieldId});
                if (status === ERROR_OK) {
                    this.typeList = data
                }
            },
            async submitForm() {
                if(!this.ruleForm.id) {
                    const {typeId,styleId,purchasePrice,salePrice} = this.ruleForm;
                    const {status } = await addPrice({typeId,styleId,purchasePrice,salePrice})
                    if(status === ERROR_OK) {
                        this.$message({
                            message:'Add Successfully',
                            type:'success'
                        })
                    } else {
                        this.$message({
                            message:'Error',
                            type:'error'
                        })
                    }
                    this.clear();
                    this.dialogVisible = false;
                    this._getOptionList();

                } else {
                    const {id,purchasePrice,salePrice} = this.ruleForm;
                    const {status} = await modPrice({id,purchasePrice,salePrice});
                    if (status === ERROR_OK) {
                        this.$message({
                            message:'Modify Successfully',
                            type:'success'
                        })
                    } else {
                        this.$message({
                            message:'Error',
                            type:'error'
                        })
                    }
                    this.clear();
                    this.dialogVisible = false
                }
            },
            clear() {
                this.ruleForm = {};
            },
            openAdd() {
                this.clear();
                this.dialogVisible = true
            },
            openEdit(r) {
                this.ruleForm = r;
                this.dialogVisible = true

            },
            async _getOptionList() {
                const {status, data} = await getUnitOptionList();
                if (status === ERROR_OK) {
                    this.list = data
                }

            }
        },
        watch: {
            optionList(list) {
                this.total = list.length
            },
            fieldId(id) {
                this._getTypeList(id)
            }
        },
        components: {
            Crumb, Search
        }
    }
</script>

<style scoped lang="scss">
    .info-collect {
        background: #f6;
        .content {
            text-align: left;
            padding: 20px 0;
            .table-wrapper {
                margin-top: 20px;
            }
            .page {
                text-align: center;
                margin-top: 10px;
            }
        }
    }
</style>